<template>
    <div>

        <ApprovalDialog ref="ApprovalDialogRef" :visible="approvalDialogVisible" :close="closeApprovalDialog"
                        :callback="approvalDialogCallBack" :options="options"></ApprovalDialog>

        <Bread title="Chance/Chance Approval"/>


        <el-row :gutter="30" >
            <el-col :span="17">

<!--                wait to approve-->
                <el-card class="box-card-result" style="margin-top: 20px">
                    <div slot="header" class="clearfix">
                        <span style="font-weight: bold">Wait to Approve</span>
                    </div>


                    <el-table
                        id="chanceTable"
                        :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                        :data="tableData"
                        height="500"
                        fixed
                        style="width: 100%;margin-bottom: 10px;overflow-y: auto; overflow-x: auto; height: 300px"
                        row-key="chanceId">

                        <el-table-column
                            prop="chanceId"
                            label="chanceId"
                            sortable
                            width="100">
                        </el-table-column>
                        <el-table-column
                            prop="chanceName"
                            label="chanceName"
                            width="130">
                        </el-table-column>
                        <el-table-column
                            prop="chanceResource"
                            label="chanceResource"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            prop="chancePhase"
                            label="chancePhase"
                            width="140">
                        </el-table-column>
                        <el-table-column
                            prop="chanceTime"
                            label="chanceTime"
                            width="110">
                        </el-table-column>
                        <el-table-column
                            prop="customerMgrDept"
                            label="customerMgrDept"
                            width="130">
                        </el-table-column>
                        <el-table-column
                            prop="customerMgrName"
                            label="customerMgrName"
                            width="140">
                        </el-table-column>
                        <el-table-column
                            prop="chanceStatus"
                            label="chanceStatus"
                            width="120">
                        </el-table-column>
                        <el-table-column
                            label="Operate"
                        >
                            <template slot-scope="scope">
                                <el-button
                                    type="primary" plain round
                                    size="mini"
                                    @click="handleApproval(scope.$index, scope.row)">Approve</el-button>

                            </template>
                        </el-table-column>
                    </el-table>

                </el-card>




            </el-col>
            <el-col :span="7"  style="margin-right: -20px;margin-top: 20px">
                <el-card class="box-card-step">
                    <div slot="header" class="clearfix">
                        <span class="title">Opportunity Stage Description</span>
                        <el-button @click="step=(++step)%7" style="float: right; padding: 3px 0" type="text"> Next Step </el-button>

                    </div>
                    <div style="height: 400px">
                        <el-steps direction="vertical" :active="step">
                            <el-step title="E: Only intention, selection has not started"></el-step>
                            <el-step title="D: Communication displaying"></el-step>
                            <el-step title="C: After the exchange and exhibition, the tender is waiting"></el-step>
                            <el-step title="B: In the bidding"></el-step>
                            <el-step title="A: Bidding, business, contract"></el-step>
                            <el-step title="S: The contract has been signed"></el-step>
                        </el-steps>
                    </div>
                </el-card>

            </el-col>
        </el-row>


    </div>
</template>

<script>
import ApprovalDialog from "@/views/NPMS/Chance/ChanceApproval/ApprovalDialog";
import {options} from "@/data/const";
import Bread from "@/components/Bread/Bread";


export default {
    name: "Approval",
    components: {Bread, ApprovalDialog},

    props: [],
    data() {
        return {

            approvalDialogVisible: false,
            step:2,
            options:options,


            tableData: [],

            // waitApproveData: [{
            //     approvalName: 'xxx',
            //     chanceId: 111,
            //     chanceName: 'xxx',
            //     approvalUploader: 'xxx',
            //     approvalUptime: 'xxx',
            // },{
            //     approvalName: 'xxx',
            //     chanceId: 111,
            //     chanceName: 'xxx',
            //     approvalUploader: 'xxx',
            //     approvalUptime: 'xxx',
            // },{
            //     approvalName: 'xxx',
            //     chanceId: 111,
            //     chanceName: 'xxx',
            //     approvalUploader: 'xxx',
            //     approvalUptime: 'xxx',
            // }, ],

            // alreadyApproveData: [{
            //     approvalName: 'aaa',
            //     chanceId: 111,
            //     chanceName: 'aaa',
            //     approvalUploader: 'aaa',
            //     approvalUptime: 'aaa',
            // },{
            //     approvalName: 'aaa',
            //     chanceId: 111,
            //     chanceName: 'aaa',
            //     approvalUploader: 'aaa',
            //     approvalUptime: 'aaa',
            // },{
            //     approvalName: 'aaa',
            //     chanceId: 111,
            //     chanceName: 'aaa',
            //     approvalUploader: 'aaa',
            //     approvalUptime: 'aaa',
            // }, ],

        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
        this.loadChance()
    },
    methods: {

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },

        //从后端获取机会数据
        loadChance() {

            // this.$axios.post(
            //     '/chance/chance/queryAllChance'
            // ).then(res => {
            //     // console.log("abc"+res.data.obj)
            //     this.tableData.length = 0
            //     this.tableData = res.data.obj
            // });

            let dto = {
                "role": this.$store.getters.getUser.roles[0]
            }
            console.log(dto)
            console.log("ddddddddto")
            this.$axios.post("/approve/approve/searchChanceByUserRole", dto).then(res => {
                console.log(res)
                this.tableData = res.data.obj
                console.log(this.tableData)
            })

        },

        //审批点击后回调函数
        approvalDialogCallBack() {
            this.loadChance()
            console.log()
        },


        //审批，在dialog中显示选中行数据
        handleApproval(index, row) {

            const data = JSON.parse(JSON.stringify(row))

            this.$nextTick(() => {
                this.$refs.ApprovalDialogRef.setData(data, index);
            })
            this.approvalDialogVisible = true;

            console.log(index, row);
        },

        //查看审批，在dialog中显示选中行数据
        checkApproval(index, row) {

            const data = JSON.parse(JSON.stringify(row))

            this.$nextTick(() => {
                this.$refs.ApprovalDialogRef.setData(data, index);
            })
            this.approvalDialogVisible = true;

            console.log(index, row);
        },

        //删除
        handleDelete(index, row) {
            console.log(index, row);
            this.waitApproveData.splice(index, 1)
        },


        //关闭机会审批弹窗
        closeApprovalDialog() {
            this.approvalDialogVisible = false
        },

    }



}
</script>

<style scoped>



.box-card-result {

    border-radius: 25px 25px 25px 25px;
}

.box-card-step {
    width: 300px;
    height: 600px;
    padding: 20px;
    padding-left: 30px;
    border-radius: 15px;
}

</style>